<template>
  <div class="container">
    <div class="title">
      <span>会计分录</span>
      <el-date-picker
        v-model="monthRange"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        value-format="YYYY-MM"
        @change="getAccountant"
      >
      </el-date-picker>
    </div>
    <div class="box-container">
      <div
        class="box"
        v-for="(p, index) in pdfList"
        :key="index"
        @click="gotoPdf(p)"
      >
        <span><img src="@/assets/img/PDF1.png" alt="" /></span>
        <span class="namespan">{{ p.file_name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { getAccountantList } from "@/api/getList";
const monthRange = ref([]);
monthRange.value[0] = history.state.startMonth;
monthRange.value[1] = history.state.endMonth;
const pdfList = ref([]);

const getAccountant = () => {
  getAccountantList({
    start_month: monthRange.value[0],
    end_month: monthRange.value[1],
  }).then((res) => {
    pdfList.value = res.data;
    if (res.data.length < 1) {
      ElMessage.error("文件不存在，请上传！");
    }
  });
};
const gotoPdf = (p) => {
  window.open(p.url, p.file_name);
};
onMounted(() => {
  getAccountant();
});
</script>
<style lang="less" scoped>
.container {
  height: calc(100vh - 142px);
  background: @mainColor;

  .title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  span {
    margin: 1vw;
  }
}
.box-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  :hover {
    border: solid 1px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    // background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    contain: content;
  }
}
.box {
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;

  :hover {
    border: none;
    // background-color: rgba(255, 255, 255, 0);
    opacity: 1;
    z-index: -1;
  }
  span {
    display: inline-block;
    text-align: center;
    img {
      width: 60px;
      height: 80px;
      :hover {
        border: none;
        background-color: rgba(255, 255, 255, 0);
        z-index: -1;
      }
    }
  }
  .namespan {
    font-size: 12px;
    margin-top: -10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
:deep(.title) {
  width: 25vw;
}
</style>
